<template>
  <XenPageLayout title="活动详情" title-align="left">
    <view class="detail-container">
      <!-- 活动详情 -->
      <view class="detail-card">
        <view class="section">
          <view class="section-title">活动详情</view>
          <view class="info-item">
            <text class="label">活动名称</text>
            <text class="value">{{
              activityDetail.Entity?.ActivityName || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">开始时间</text>
            <text class="value">{{
              formatDateTime(activityDetail.Entity?.StartTime) || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">结束时间</text>
            <text class="value">{{
              formatDateTime(activityDetail.Entity?.EndTime) || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">活动状态</text>
            <text class="value">{{
              activityDetail.Entity?.ActivityStatus || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">创建人</text>
            <text class="value">{{
              activityDetail.Entity?.CreateBy || ""
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">创建时间</text>
            <text class="value">{{
              formatDateTime(activityDetail.Entity?.CreateTime) || ""
            }}</text>
          </view>
        </view>
      </view>

      <!-- 活动参与列表 -->
      <view class="detail-card">
        <view class="section">
          <view class="section-title">参与列表</view>
          <view class="section-content" v-if="participationList.length > 0">
            <view
              class="participation-item"
              v-for="(item, index) in participationList"
              :key="item.ID || index"
            >
              <view class="participant-info">
                <view class="info-row">
                  <text class="label">参与者类型：</text>
                  <text class="value">{{ item.ParticipantType || "" }}</text>
                </view>
                <view class="info-row">
                  <text class="label"> 姓名/公司名 </text>
                  <text class="value">{{ item.Name || "" }}</text>
                </view>
                <view class="info-row">
                  <text class="label">联系电话：</text>
                  <text class="value">{{ item.Phone || "" }}</text>
                </view>
              </view>

              <!-- 操作按钮 -->
              <view class="participant-actions">
                <view
                  class="action-btn detail-btn"
                  @tap="viewParticipationDetail(item)"
                >
                  <text class="btn-text">查看参与详情</text>
                </view>
              </view>
            </view>
          </view>
          <view class="section-content" v-if="participationList.length === 0">
            <view class="empty-participation">
              <text class="empty-text">暂无参与记录</text>
              <view class="action-btn participate-btn" @tap="goToParticipate">
                <text class="btn-text">立即参与</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import { ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { SysActivityParticipationApi } from "./api";
import { SysActivityListApi } from "../sysactivitylist/api";
import { formatDateTime } from "../../../utils/xenUtils";
import type { ISearchResult } from "./api/interface";
// 添加事件总线导入
import { ActivityEvents } from "../../../utils/eventBus";

// 活动ID
const activityId = ref<string>("");
// 活动详情 - 改为包装对象，与模板保持一致
const activityDetail = ref<{ Entity?: any }>({});
// 活动参与列表
const participationList = ref<ISearchResult[]>([]);

// 活动事件监听器取消函数
let unsubscribeActivityEvents: (() => void) | null = null;

// 获取页面参数
onLoad((options) => {
  if (options?.activityId) {
    activityId.value = options.activityId;
    fetchActivityDetail();
    fetchParticipationList();

    // 监听活动更新事件
    unsubscribeActivityEvents = ActivityEvents.on((eventData) => {
      // 如果是当前活动的参与事件，刷新列表
      if (
        String(eventData.id) === activityId.value &&
        eventData.action === "custom" &&
        eventData.customAction === "join"
      ) {
        fetchParticipationList();
      }
    });
  }
});

// 页面显示时刷新数据
onShow(() => {
  if (activityId.value) {
    fetchParticipationList();
  }
});

// 页面卸载时移除事件监听
onUnload(() => {
  if (unsubscribeActivityEvents) {
    unsubscribeActivityEvents();
    unsubscribeActivityEvents = null;
  }
});

// 获取活动详情
const fetchActivityDetail = async () => {
  if (!activityId.value) return;
  const res = await SysActivityListApi().get(activityId.value);
  // 将返回的数据包装成 Entity 结构
  activityDetail.value = { Entity: res.Entity };
};

// 获取活动参与列表
const fetchParticipationList = async () => {
  if (!activityId.value) return;
  const res = await SysActivityParticipationApi().search({
    Page: 1,
    Limit: 50,
    ActivityId: activityId.value,
  });
  if (res && res.Data) {
    participationList.value = (res.Data as ISearchResult[]) || [];
  } else {
    participationList.value = [];
  }
};

// 跳转到参与活动页面
const goToParticipate = () => {
  uni.navigateTo({
    url: `/subpkg-activity/activity/sysactivityparticipation/create?activityId=${activityId.value}`,
  });
};

// 查看参与详情
const viewParticipationDetail = (item: ISearchResult) => {
  uni.navigateTo({
    url: `/subpkg-activity/activity/sysactivityparticipation/detail?Id=${item.ID}`,
  });
};
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}

.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.section {
  padding: 30rpx;

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8rpx;
      height: 30rpx;
      width: 6rpx;
      background-color: #b88e67;
    }
  }
}

.info-item,
.info-row {
  display: flex;
  margin-bottom: 16rpx;

  .label {
    width: 160rpx;
    font-size: 26rpx;
    color: #666;
    flex-shrink: 0;
  }

  .value {
    flex: 1;
    font-size: 26rpx;
    color: #333;
    word-break: break-all;
  }
}

.participation-item {
  border-bottom: 2rpx solid #f5f7fa;
  padding-bottom: 30rpx;
  margin-bottom: 30rpx;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.participant-info {
  margin-bottom: 20rpx;
}

.participant-actions {
  margin-top: 24rpx;
  display: flex;
  justify-content: flex-end; /* 确保按钮居右 */
  align-items: center;
  width: 100%; /* 确保容器占满宽度 */
}

.action-btn {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  padding: 0 24rpx;
  transition: all 0.2s;
  min-width: 120rpx; /* 设置最小宽度，让按钮更统一 */

  &:active {
    transform: scale(0.97);
  }

  .btn-text {
    font-size: 24rpx;
    font-weight: 500;
    color: #fff;
  }
}

.detail-btn {
  background: #b88e67;
  box-shadow: 0 4rpx 8rpx rgba(184, 142, 103, 0.2);
}

.empty-participation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.participate-btn {
  background: #b88e67;
  box-shadow: 0 4rpx 8rpx rgba(184, 142, 103, 0.2);
}
</style>
